<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="include :: header('开发者社区 - DEV社区')"></head>
<body>
<div th:replace="include :: top"></div>
<div th:replace="include :: column(${cateKey})"></div>

<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
      <div class="fly-panel" style="margin-bottom: 0;">
        <div class="fly-panel-title fly-filter">
              找到 “<span style="color: dodgerblue;font-size: 20px" th:text="${keyword}" ></span>” 相关信息<span id="htmlTotal" style="color: red;font-size: 20px">0</span>条
        </div>
        <ul class="fly-list" id="pageContent">
        </ul>
        <!-- <div class="fly-none">没有相关数据</div> -->
        <div style="text-align: center" id="pageDiv">
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">本周热议</dt>
        <dd>
          <a href="">基于 layui 的极简社区页面模版</a>
          <span><i class="iconfont icon-pinglun1"></i> 16</span>
        </dd>

        <!-- 无数据时 -->
        <!--
        <div class="fly-none">没有相关数据</div>
        -->
      </dl>

      <th:block th:include="include :: adAndFriend"/>


    </div>
  </div>
</div>
<th:block th:include="include :: footer('jie')"/>
<script type="text/javascript">

  var cate='[[${cate}]]';
  $(document).ready(function() {
    getArtList(1);
    $(".fly-panel-title a").each(function(){
      $(this).click(function(){
        $(".fly-panel-title a").removeClass("layui-this");
        $(this).addClass("layui-this");
        return false;//防止页面跳转
      });
    });
  });
  function getArtList(page){
    var pageSize=10;
    var keyword = "[[${keyword}]]"
    $.ajax({
      type : 'post',
      url : '/article/es/search/list',
      data : {
        keyword: keyword,
        pageNum : page,
        pageSize : pageSize,
      },
      cache : false,
      dataType : 'json',
      success : function(res) {
	      if(res.data){
	      	  var data=res.data;
		      var html = template('artTpl', data);
		      $('#pageContent').html(html);
		      $('#htmlTotal').html(data.totalElements);
		      layui.use('laypage', function(){
		        var laypage = layui.laypage;
		        laypage.render({
		          elem : 'pageDiv',
		          count : data.data.totalElements,
		          curr : page || 1,
		          limit: pageSize,
		          theme: 'main',
		          jump : function(obj, first) { //触发分页后的回调
		            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
		              getArtList(obj.curr);
		            }
		          }
		        });
		      });
	      }
      }
    });
  }
</script>
<script id="artTpl" type="text/html">
  {{each content item i}}
  <li>
    <a href="/user/home/{{item.author}}" class="fly-avatar">
      <img src="{{item.bbsUser.avatar}}" alt="{{item.bbsUser.nickname}}">
    </a>
    <h2>
      <a class="layui-badge">{{item.cate | artCateStr}}</a>
      <a href="/article/detail/{{item.id}}"> {{@item.title}}</a>

    </h2>
    <div class="fly-list-info">
      <a href="user/home.html" link>
        <cite>贤心</cite>
		{{if item.bbsUser.authContent.length>0}}
        	<i class="iconfont icon-renzheng" title="认证信息：{{item.bbsUser.authContent}}"></i>
		{{/if}}
        <!--
        <i class="layui-badge fly-badge-vip">VIP3</i>
        -->
      </a>
      <span>{{item.createTime}}</span>

      <span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> {{item.kiss}}</span>
      {{if item.status==9}}
      <span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
      {{/if}}
      <span class="fly-list-nums">
        <!--<i class="iconfont icon-pinglun1" title="回答"></i> {{item.comment}}-->
      </span>
    </div>
    <div class="fly-list-badge">
      {{if item.top}}
      <span class="layui-badge layui-bg-black">置顶</span>
      {{/if}}
      {{if item.rec}}
      <span class="layui-badge layui-bg-red">精帖</span>
      {{/if}}
    </div>
  </li>
  {{/each}}
</script>
</body>
</html>